<template>
    <div>
        <div  v-if="Object.keys(this.formField).length > 0">
            <List border>
                <ListItem v-for="(val, key) in formField" :key="key">
                    <div style="width:100%">
                        <div style="font-size:20px">
                            <b>{{val[2]}}</b><span style="margin-left:10px">{{key}}</span>
                        </div>
                        <!-- 必填设置 -->
                        <!-- <div style="margin-top:10px"><b>必填设置</b></div> -->
                        <div style="display:flex;align-items: center;margin-top:10px" v-if="rules[key] && rules[key].length >= 1">
                            <div style="width:calc(100% / 2)">
                                <b>是否必填</b>
                                <SwitchIview v-model="rules[key][0].required" style="margin-left:10px"/>
                            </div>
                            <div style="width:calc(100% / 2);margin-left:10px">
                                <b>验证失败描述</b>
                                <Input v-model="rules[key][0].message" maxlength="50"
                                placeholder="请填写失败描述"/>
                            </div>
                        </div>
                        <!-- 类型设置 -->
                        <!-- <div style="margin-top:10px"><b>类型设置</b></div> -->
                        <div style="display:flex;align-items: center;margin-top:10px">
                            <div style="width:calc(100% / 2)">
                                <b>数据类型</b>
                                <Select v-model="rules[key][0].type">
                                    <Option value="string">string</Option>
                                    <Option value="number">number</Option>
                                    <Option value="email">email</Option>
                                    <Option value="date">date</Option>
                                    <Option value="time">time</Option>
                                    <Option value="array">array</Option>
                                </Select>
                            </div>
                            <div style="width:calc(100% / 2);margin-left:10px">
                                <b>判定触发</b>
                                <Select v-model="rules[key][0].trigger">
                                    <Option value="blur">失焦</Option>
                                    <Option value="focus">聚焦</Option>
                                    <Option value="change">改变</Option>
                                </Select>
                            </div>
                            <!-- <div style="margin:0 10px;width:calc(100% / 3)">
                                <b>验证失败描述</b>
                                <Input v-model="rules[key][1].message" maxlength="50"
                                placeholder="请填写失败描述"/>
                            </div> -->
                            <!-- <div style="width:calc(100% / 3)">
                                <b>判定触发</b>
                                <Select v-model="rules[key][1].trigger">
                                    <Option value="blur">失焦</Option>
                                    <Option value="focus">聚焦</Option>
                                    <Option value="change">改变</Option>
                                </Select>
                            </div> -->
                        </div>
                    </div>
                </ListItem>
            </List>
            <div style="margin-top:10px;text-align:right">
                <Button type="primary" @click="saveAuth">确认保存验证规则</Button>
            </div>
        </div>
        <div v-else style="padding:50px 0">
            <empty msg="暂未设置表单字段"/>
        </div>
    </div>
</template>

<script>
export default {
  name: 'FormAuth',
  components: {
  },
  props: {
    // 行数据
    row: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: []
    },
    propAuth: {}
  },
  watch: {
    'row': {
      handler: function (e) {
        this.rows = e
        this.groupField()
      }
    }
  },
  data () {
    return {
      rows: this.row,
      formField: {},
      rules: {}
    }
  },
  methods: {
    groupField () {
      let rows = this.rows
      this.rules = {}
      this.formField = this.lseutil.getGroupFieldDatas(rows)
      for (let key in this.formField) {
        let type = this.formField[key][3]
        // if (type === 'string' || type === 'number') {

        //   // this.rules[key].push()
        // }
        this.rules[key] = [{
          required: false,
          message: '',
          trigger: 'blur',
          type: type
        }]
      }
      for (let key in this.propAuth) {
        if (this.rules[key]) {
          // console.log(this.propAuth[key])
          this.rules[key] = this.lseutil.arrayCopy(this.propAuth[key])
        }
      }
    },
    saveAuth () {
      console.log(this.rules)
      let formField = this.lseutil.getGroupField(this.rows)
      this.$emit('sendFormAuth', this.rules, formField)
    }
  },
  mounted () {
    this.groupField()
  }
}
</script>

<style scoped>

</style>
